import React, { Component } from 'react';
import req from '../../../../http/req'
import url from '../../../../config/url'
import * as echarts from 'echarts';
import '../../../../assets/styles/tongji.css'
class Bingyu extends Component {
    state = {
        data: []
    }
    render() {
        return (
            <div id='tongji'>

            </div>
        );
    }
    componentDidMount() {
        this.loading()
    }
    loading() {
        var chartDom = document.getElementById('tongji');
        if (chartDom) {
            var myChart = echarts.init(chartDom);
            var option;
            req.get(url.GetStatData).then((res) => {
                // console.log(res)
                // console.log(res.data.data.accessFrom)
                this.setState({
                    data: res.data.data.accessFrom
                },
                    () => {
                        // console.log('22222', this.state.data);
                        option = {
                            title: {
                                text: '温度统计表',
                                subtext: 'Temperature table',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            series: [
                                {
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: '50%',
                                    data: [...this.state.data]
                                    ,
                                    // [
                                    //     { value: 1048, name: '室内温度' },
                                    //     { value: 735, name: '室外温度' },
                                    //     { value: 580, name: '土壤湿度' },
                                    //     { value: 484, name: '室外湿度' },
                                    //     { value: 300, name: '室内湿度' }
                                    // ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                        option && myChart.setOption(option);
                    })
            })

        }

    }

}

export default Bingyu;
